<!-- 商城 - 单张优惠券展示组件 -->
<template>
	<view
		class="vk-mall-user-coupon list-item"
		:class="{ 'coupon-lose': disableCom ? true : false }"
	>
		<view class="content" @click="click">
			<view class="left">
				<view class="discounts">
					<block v-if="coupon.couponInfo.type === 1">
						<text class="min">￥</text>
						<text class="max">{{
							parseFloat(
								vk.pubfn.priceFilter(coupon.couponInfo.coupon_rule.discount_amount)
							)
						}}</text>
					</block>
					<block v-if="coupon.couponInfo.type === 2">
						<text class="max">{{
							vk.pubfn.discountFilter(coupon.couponInfo.coupon_rule.discount_proportion)
						}}</text>
					</block>
				</view>
				<view class="full-reduction">{{ typeCom }}</view>
			</view>
			<view class="right">
				<view class="info-title">{{ reductionCom }}</view>
				<view class="date-get">
					<view class="date">
						生效时间：{{
							vk.pubfn.timeFormat(
								coupon.couponInfo.effective_time_rule.start_fixed_time,
								"yyyy-MM-dd hh:mm"
							)
						}}
					</view>
					<view class="get" @click="onCouponUse" v-if="mode === 'list' && !disableCom">
						<text>立即使用</text>
					</view>
					<view class="get" v-else-if="mode === 'choose' && !disableCom">
						<u-checkbox
							shape="circle"
							active-color="var(--main)"
							:value="checkedId === coupon._id"
							:name="coupon._id"
							@change="checkboxChange"
						>
						</u-checkbox>
					</view>
				</view>
				<view class="describe-title">
					<text>{{ coupon.disabledMsg }}</text>
					<text>详细信息</text>
					<view @click.stop="footerActived = !footerActived">
						<u-icon name="arrow-down" v-if="footerActived"></u-icon>
						<u-icon name="arrow-up" v-else></u-icon>
					</view>
				</view>
			</view>
			<view class="use-status" v-if="disableCom">
				<text v-if="disableCom === 1">已使用</text>
				<text v-else-if="disableCom === 2">已过期</text>
				<text v-else>不可用</text>
			</view>
		</view>
		<view class="collapse" :class="footerActived ? 'actived' : ''">
			<text>{{ coupon.couponInfo.describe || "暂无备注" }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-user-coupon",
	props: {
		// 优惠券信息
		coupon: {
			Type: Object,
			default: function () {
				return {
					couponInfo: {}
				}
			}
		},
		// 选中哪个id
		checkedId: {
			Type: [Number, String]
		},
		/**
		 * 模式
		 * choose 主要用于选择一张优惠券
		 * list 主要用于我的优惠券列表中显示 立即使用按钮
		 * default 不显示功能按钮
		 */
		mode: {
			Type: String,
			default: ""
		}
	},
	data() {
		return {
			// 每一项底部的拓展按钮
			footerActived: false
		}
	},
	methods: {
		click() {
			let that = this
			let { coupon } = that
			that.$emit("click", { coupon })
		},
		checkboxChange(obj) {
			this.click()
		},
		onCouponUse() {
			vk.navigateTo(`/pages/index/index`)
		}
	},
	computed: {
		disableCom() {
			let that = this
			let { coupon } = that
			let key = false
			if (coupon.status === 1) {
				key = 1 // 已使用
			} else if (coupon.status === 2) {
				key = 2 // 已过期
			} else if (coupon.exp_time > 0 && new Date().getTime() > coupon.exp_time) {
				key = 2 // 已过期
			} else if (coupon.disabled) {
				key = 3 // 不可用
			}
			return key
		},
		reductionCom() {
			let that = this
			let { vk, coupon } = that
			let str = ""
			let min_amount = parseFloat(
				vk.pubfn.priceFilter(coupon.couponInfo.coupon_rule.min_amount)
			)
			if (coupon.couponInfo.type === 1) {
				let discount_amount = parseFloat(
					vk.pubfn.priceFilter(coupon.couponInfo.coupon_rule.discount_amount)
				)
				str = `满${min_amount}元减${discount_amount}元`
			} else if (coupon.couponInfo.type === 2) {
				let discount_proportion = vk.pubfn.discountFilter(
					coupon.couponInfo.coupon_rule.discount_proportion
				)
				str = `满${min_amount}元打${discount_proportion}`
			}
			return str
		},
		typeCom() {
			let that = this
			let { vk, coupon } = that
			let arr = ["", "满减券", "折扣券", "随机金额券", "商品兑换券", "通用券"]
			return arr[coupon.couponInfo.type]
		},
		availableRangeRuleCom() {
			let that = this
			let { vk, coupon } = that
			let str = "全场通用"
			let type = vk.pubfn.getData(coupon, "couponInfo.available_range_rule.type")
			if (type != 0) {
				str = "仅部分商品可用"
			}
			return str
		},
		effectiveTimeRuleCom() {
			let that = this
			let { vk, coupon } = that
			let { start_time, exp_time } = coupon
			let start_str = vk.pubfn.timeFormat(start_time, "yyyy.MM.dd")
			let exp_str = vk.pubfn.timeFormat(exp_time, "yyyy.MM.dd")
			return `${start_str}-${exp_str}`
		}
	}
}
</script>

<style lang="scss" scoped>
/* list-item开始 */
.list-item {
	margin: 20rpx;
	overflow: hidden;
	> .content {
		padding: 0;
		color: #606266;
		display: flex;
		align-items: center;
		position: relative;
		> .left {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 164rpx;
			height: 196rpx;
			background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/df4f4956-8a80-4673-af48-5a901ff5de9f.png") no-repeat center;
			background-size: 100% 100%;
			.discounts {
				display: flex;
				justify-content: center;
				align-items: baseline;
				width: 100%;
				.min {
					color: #ffffff;
					font-size: 28rpx;
				}
				.max {
					font-size: 68rpx;
					color: #ffffff;
					font-weight: bold;
				}
			}
			.full-reduction {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 30px;
				font-size: 12px;
				color: #ffffff;
			}
		}
		> .right {
			flex: 1;
			height: 196rpx;
			padding: 24rpx;
			background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/4359baa4-6f7b-45f5-85c1-e6b5b361ea90.png") no-repeat center;
			background-size: 100% 100%;
			.info-title {
				display: flex;
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 30rpx;
			}
			.date-get {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 94rpx;
				border-bottom: 2rpx dashed #eeeeee;
				.date {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #555555;
				}
				.get {
					text {
						padding: 10rpx 20rpx;
						background-color: var(--main);
						color: #ffffff;
						font-size: 24rpx;
						border-radius: 100rpx;
					}
					text:active {
						filter: grayscale(50%);
					}
					.use {
						background-color: transparent;
						border: 1px solid var(--main);
						color: var(--main);
					}
				}
			}
			.describe-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 40rpx;
				text {
					color: #555555;
					font-size: 24rpx;
				}
				.more {
					transform: rotate(90deg);
				}
			}
		}
		.use-status {
			position: absolute;
			right: -20rpx;
			top: -25rpx;
			z-index: 10;
			width: 100rpx;
			height: 100rpx;
			border: 2rpx solid #c0c0c0;
			border-radius: 100%;
			text {
				display: inline-block;
				color: #c0c0c0;
				font-size: 24rpx;
				transform: rotate(45deg);
				margin-top: 40rpx;
			}
		}
	}
	.collapse {
		display: none;
		padding: 20rpx;
		font-size: 24rpx;
		color: #909399;
		line-height: 40rpx;
		background-color: #ffffff;
		border-top: 1px solid #f8f8fa;
	}
	.collapse.actived {
		display: block;
	}
}

.list-item.coupon-lose {
	filter: grayscale(100%);
}
</style>
